<template>
    <div>
        <div class="box">
            <div class="bos">
                <div class="nav">
                    <div class="navOne">
                        <div class="btn" :class="{ active: itemIndex === 1 }" @click="btnClick(1)">我的应用</div>
                        <template v-for="(item, key) of tabs" :key="key">
                            <div class="btn" :class="{ active: itemIndex === item.orderNum }"
                                @click="btnClick(item.orderNum)">{{
                                    item.text }}</div>
                        </template>
                    </div>
                    <div>
                        <div class="icon-jiazai_shuaxin"></div>
                    </div>
                </div>
                <div v-if="itemIndex == 1">
                    <div class="container">
                        <div class="container-one" v-for="item in form" :key="item.id">
                            <a-badge :count="item.count">
                                <a :href="'#' + item.url">
                                    <div class="container-img">
                                        <img :src='item.icon ? item.icon : defaultImageSrc' alt="图片加载失败">
                                    </div>
                                </a>
                                <div class="container-name">{{ item.name }}</div>
                            </a-badge>
                        </div>
                        <div class="tianJ">
                            <div class="icon-iconmobanfuzhi" @click="showModal"></div>
                        </div>
                    </div>
                </div>
                <div v-if="itemIndex == 2">数据大屏</div>
                <div v-if="itemIndex == 3">应用超市</div>
            </div>
        </div>
    </div>
</template>
  
<script>

export default {
    name: 'SkrivetVueIndex',
    data() {
        return {
            // defaultImageSrc: require("@/assets/img/theme/403.png").default,
            defaultImageSrc: '图片加载失败',
            itemIndex: 1,
            form: [],
        }
    },

    mounted() {
        // /modules/myApp/pageList
        this.init();
    },

    methods: {
        init() {
            this.dictionary()
        },
        btnClick(key) {
            this.itemIndex = key
            // this.$api.GET('')
        },
        // 调取父组件方法
        showModal() {
            // console.log(111);
            this.$parent.btnClick(3)
        },
        dictionary() {
            const that = this;
            this.$api.GET('/data/dict/item/pageList?groupId=APPLICATION').then(res => {
                // debugger
                if (res.data && res.data.length > 0) {
                    that.tabs = res.data.sort((a, b) => {
                        return a.orderNum - b.orderNum;
                    });
                }
                if (res.data && res.data.length > 0) {
                    that.$api.GET('/modules/myApp/pageList').then(res => {
                        that.form = res.data;
                    });
                }
            })
        }

    },
};
</script>
  
<style lang="less" scoped>
.bos {
    height: 280px;
    margin: 0px 20px 0 20px;
    border: 1px solid #0044ff;
    border-radius: 10px;
    padding: 10px 0 0px 0;
    box-shadow: inset 0px 0px 10px 34px rgba(3, 9, 90, 60%);
    font-size: 14px;

    .nav {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;

        .navOne {
            display: flex;
            align-items: center;
        }
    }
}

.btn {
    font-size: 18px;
    font-weight: 600;
    padding-right: 50px;
    color: #07c6e5;
}

.active {
    color: #fff;
}

.container {
    margin: 0px 30px 20px 30px;
    display: flex;
    overflow: auto;
    height: 210px;
.tianJ{
    padding-top:15px;
}
    .container-one {
        margin-right: 30px;
        text-align: center;
        flex-wrap: wrap;
    padding-top:15px ;
        .container-img {
            width: 60px;
            height: 60px;
            background: rgb(248, 250, 250);
            border-radius: 10px;

            img {
                width: 60px;
                height: 60px;
                border-radius: 10px;
            }
        }

        .container-name {
            color: #fff;
            padding-top: 10px;
        }
    }
}
</style>